<template>
  <div class="box">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              车商数量
            </div>
            <count-to :start-val="0" :end-val="500" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              评估师数量
            </div>
            <count-to :start-val="0" :end-val="100" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              保证金
            </div>
            <count-to :start-val="0" :end-val="5000000" :duration="1000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              车包数量
            </div>
            <count-to :start-val="0" :end-val="100" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              车商数量
            </div>
            <count-to :start-val="0" :end-val="500" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              评估师数量
            </div>
            <count-to :start-val="0" :end-val="100" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              保证金
            </div>
            <count-to :start-val="0" :end-val="5000000" :duration="1000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              车包数量
            </div>
            <count-to :start-val="0" :end-val="100" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              车商数量
            </div>
            <count-to :start-val="0" :end-val="500" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              评估师数量
            </div>
            <count-to :start-val="0" :end-val="100" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              保证金
            </div>
            <count-to :start-val="0" :end-val="5000000" :duration="1000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              车包数量
            </div>
            <count-to :start-val="0" :end-val="100" :duration="1" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../assets/css/reset.css";
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  data() {
    let legend = {
      orient: "vertical",
      itemWidth: 13,
      // x: "center",
      right: "20px",
      y: "center",
      icon: "circle",
      formatter: "{name}",
    };
    let userColor = "#FE7503";
    let lineWidth = 3;
    let color = ["#ddd", "#3333cc", "#ff9900"];
    return {
      incomeActive: "1", // 收入数据当前激活样式
      addUserActive: "1", // 新增用户当前激活样式
      briskUserActive: "1", // 活跃用户当前激活样式
      carParkActive: "1", // 车程流量当前激活样式
      isShow: "1",
      totalUser: 0,
      addUser: 0,
      addUserTB: 0,
      addUserHB: 0,
      activeUser: 0,
      activeUserTB: 0,
      activeUserHB: 0,
      headerAyy: [
        {
          title: "昨日收入",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月日均收入",
          lastmoney: 0,
          moneyType: true,
        },
        {
          title: "昨日订单笔数",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月日均订单笔数",
          lastmoney: 0,
          moneyType: false,
        },
        {
          title: "昨日车流量",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月日均车流量",
          lastmoney: 0,
          moneyType: false,
        },
        {
          title: "车场车位情况",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月泊位平均收入",
          lastmoney: 0,
          moneyType: true,
        },
        {
          title: "月租车总数",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月月卡购买金额",
          lastmoney: 0,
          moneyType: true,
        },
        {
          title: "昨日周转率",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月日均周转率",
          lastmoney: 0,
          moneyType: false,
        },
      ],
      // 收入数据ecart
      secondMapLeft: {
        color: "#49A1FE",
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        xAxis: {
          type: "category",
          axisLine: {
            show: true,
          },
          data: [],
        },
        yAxis: {
          type: "value",
          name: "单位/元",
          min: 0,
          max: 100,
          axisLine: { show: false },
        },

        series: [
          {
            type: "bar",
            data: [],
            barWidth: "23px",
          },
        ],
      },

      // 支付类型echarts数据
      secondmapcenter01: {
        color: ["#22D7BB", "#24AAFF", "#FF3EE7", "#FCB840", "#5940E2"],
        tooltip: {
          trigger: "item",
        },
        legend: legend,
        series: [
          {
            type: "pie",
            itemStyle: {
              borderWidth: 2, //描边线宽
              borderColor: "#fff",
            },
            label: {
              formatter: "{b}:{c}",
              color: "#000",
            },
            data: [
              {
                name: "支付宝",
                value: 0,
              },
              {
                name: "ETC",
                value: 0,
              },
              {
                name: "微信支付",
                value: 0,
              },
              {
                name: "银联支付",
                value: 0,
              },
              {
                name: "工行支付",
                value: 0,
              },
            ],
          },
        ],
      },

      // 业务类型数据echarts数据
      secondmapcenter02: {
        color: ["#22D7BB", "#24AAFF", "#FF3EE7", "#FCB840", "#5940E2"],
        tooltip: {
          trigger: "item",
        },
        legend: legend,
        series: [
          {
            type: "pie",
            itemStyle: {
              borderWidth: 2, //描边线宽
              borderColor: "#fff",
            },
            label: {
              formatter: "{b}:{c}",
              color: "#000",
            },
            data: [
              {
                name: "智慧停车",
                value: 0,
              },
              {
                name: "路侧停车",
                value: 0,
              },
              {
                name: "车场月卡",
                value: 0,
              },
              {
                name: "商家充值",
                value: 0,
              },
            ],
          },
        ],
      },

      // 金额占比
      secondmapright: {
        color: ["#73C0DE", "#91CC75"],
        legend: {
          bottom: "10px",
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          itemGap: 40,
          textStyle: {
            color: "rgba(68, 68, 69, 1)",
            fontSize: "14",
          },
        },
        series: [
          {
            type: "pie",
            data: [
              // {
              //   name: "应收金额",
              //   value: "0",
              // },
              {
                name: "实收金额",
                value: "0",
              },
              {
                name: "优惠金额",
                value: "0",
              },
            ],
            hoverAnimation: false,
            // labelLine: {
            //   normal: {
            //     length: 10,
            //     length2: 20,
            //     lineStyle: {
            //       color: "rgba(75, 219, 198, 1)",
            //     },
            //   },
            // },
            label: {
              formatter: "{b}:{c}\n占比：{d}%",
              color: "#000",
            },
          },
        ],
      },

      userAyy: [
        {
          title: "昨日收入",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月日均收入",
          lastmoney: 0,
        },
        {
          title: "昨日收入",
          money: 0,
          zhoubi: 0,
          ribi: 0,
          lastTitle: "上月日均收入",
          lastmoney: 0,
        },
        {
          title: "昨日收入",
          money: 0,
          zhoubi: 0,
          ribi: 0,
        },
      ],

      // 新增用户echarts数据
      userlrft: {
        title: {
          text: "新增用户趋势",
        },
        color: userColor,
        // 用formatter回调函数显示多项数据内容
        tooltip: {
          trigger: "axis",
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          axisLine: {
            onZero: true,
            show: true,
            lineStyle: {},
          }, // x轴横线
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          axisLine: { onZero: false, show: false, lineStyle: {} }, // y轴线
          type: "value",
          min: 0,
          max: 100,
        },
        series: [
          {
            name: "新增用户数",
            type: "line",
            data: [],
            lineStyle: {
              color: userColor,
              width: lineWidth,
            },
          },
        ],
      },

      // 活跃用户echarts数据
      useright: {
        title: {
          text: "活跃用户趋势",
        },
        color: userColor,
        // 用formatter回调函数显示多项数据内容
        tooltip: {
          trigger: "axis",
          formatter(params, ticket, callback) {
            let htmlStr = "";
            const valMap = {};
            // 过滤无效值params
            const paramsFilter = params.filter((item) => item?.value && item);
            for (let i = 0; i < paramsFilter.length; i++) {
              const param = paramsFilter[i];
              const xName = param.name; // x轴的名称
              const { seriesName } = param; // 图例名称
              const { value } = param; // y轴值
              const { color } = param; // 图例颜色
              if (i === 0) {
                htmlStr += `${xName}<br/>`; // x轴的名称
              }
              htmlStr += "<div>";
              // 为了保证和原来的效果一样，这里自己实现了一个点的效果
              htmlStr += `<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${color};"></span>`;
              // 圆点后面显示的文本
              htmlStr += `${seriesName}：${value}`;
              htmlStr += "</div>";
              valMap[seriesName] = value;
            }
            return htmlStr;
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          axisLine: { onZero: true, show: true, lineStyle: {} }, // x轴线
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          axisLine: { onZero: false, show: false, lineStyle: {} }, // y轴线
          type: "value",
          min: 0,
          max: 100,
        },
        series: [
          {
            name: "活跃用户数",
            type: "line",
            data: [],
            lineStyle: {
              color: userColor,
              width: lineWidth,
            },
          },
        ],
      },

      // 车场流量echarts数据
      parkflow: {
        title: {
          text: "",
        },
        color: ["#30C25B", "#1990FF"],
        // 用formatter回调函数显示多项数据内容
        tooltip: {
          trigger: "axis",
          formatter(params, ticket, callback) {
            let htmlStr = "";
            if (params && params.length) {
              htmlStr = params[0].name;
              params.forEach((item) => {
                htmlStr += `<br><span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${item.color};"></span>`;
                htmlStr += `${item.seriesName} : ${item.value}`;
              });
            }
            return htmlStr;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLine: { show: false },
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisLine: { show: true },
          data: [],
        },
        series: [
          {
            name: "进场流量",
            type: "line",
            data: [],
            lineStyle: {
              width: lineWidth,
            },
          },
          {
            name: "出场流量",
            type: "line",
            data: [],
            lineStyle: {
              width: lineWidth,
            },
          },
        ],
      },
      picker_data: [],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      params: {
        startDate: "",
        endDate: "",
        userId: 1
      },
    };
  },

  methods: {
    GetCurrentDate(type) {
      let time = "";
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let h = date.getHours(); //获取当前小时数(0-23)
      let m = date.getMinutes(); //获取当前分钟数(0-59)
      let s = date.getSeconds(); //获取当前秒数(0-59)
      if (month < 10) month = `0${month}`;
      if (day < 10) day = `0${day}`;
      if (type == "yyyy-mm-dd") time = `${year}-${month}-${day}`;
      if (type == "yyyy-mm-dd hh:mm:ss")
        time = `${year}-${month}-${day} ${h}:${m}:${s}`;
      return time;
    },

    //收入数据自定义
    customize(res) {
      this.$set(this.picker_data, 0, res[0]);
      this.$set(this.picker_data, 1, res[1]);
      this.getPayDataOverview();
    },

    //用户数据自定义
    userCustomize(res) {
      this.$set(this.value2, 0, res[0]);
      this.$set(this.value2, 1, res[1]);
      this.getUserDataKanban();
    },
    //车场流量自定义
    parkCustomize(res) {
      this.$set(this.value4, 0, res[0]);
      this.$set(this.value4, 1, res[1]);
      this.getDataFlowRate();
    },

    //收入
    getIncomeData(type) {
      this.incomeActive = String(type);
      if (type == 1) {
        // 近一周
        this.$set(this.picker_data, 0, this.getRecentDay_Date(7));
        this.$set(this.picker_data, 1, this.getRecentDay());
        this.getPayDataOverview();
      } else if (type == 2) {
        //近一月
        this.$set(this.picker_data, 0, this.getRecentDay_Date(30));
        this.$set(this.picker_data, 1, this.getRecentDay());
        this.getPayDataOverview();
      } else if (type == 3) {
        // 近三月
        this.$set(this.picker_data, 0, this.getRecentDay_Date(90));
        this.$set(this.picker_data, 1, this.getRecentDay());
        this.getPayDataOverview();
      }
    },
    // 新增用户
    getUserData(type) {
      this.addUserActive = String(type);
      if (type == 1) {
        // 近一周
        this.$set(this.value2, 0, this.getRecentDay_Date(7));
        this.$set(this.value2, 1, this.getRecentDay());
        this.getUserDataKanban();
      } else if (type == 2) {
        //近一月
        this.$set(this.value2, 0, this.getRecentDay_Date(30));
        this.$set(this.value2, 1, this.getRecentDay());
        this.getUserDataKanban();
      } else if (type == 3) {
        // 近三月
        this.$set(this.value2, 0, this.getRecentDay_Date(90));
        this.$set(this.value2, 1, this.getRecentDay());
        this.getUserDataKanban();
      }
    },
    getThreeMonth() {
      let month = require("moment");
      let list = [
        month(new Date())
          .subtract(3, "months")
          .startOf("month")
          .format("YYYY-MM-DD"),
        month(new Date())
          .subtract(1, "months")
          .endOf("month")
          .format("YYYY-MM-DD"),
      ];
      return list;
    },

    //车场流量
    getParkData(type) {
      this.carParkActive = String(type);
      if (type == 1) {
        // 近一周
        this.$set(this.value4, 0, this.getRecentDay_Date(7));
        this.$set(this.value4, 1, this.getRecentDay());
        this.getDataFlowRate();
      } else if (type == 2) {
        //近一月
        this.$set(this.value4, 0, this.getRecentDay_Date(30));
        this.$set(this.value4, 1, this.getRecentDay());
        this.getDataFlowRate();
      } else if (type == 3) {
        // 近三月
        this.$set(this.value4, 0, this.getRecentDay_Date(90));
        this.$set(this.value4, 1, this.getRecentDay());
        this.getDataFlowRate();
      }
    },
    getPayDataOverview() {
      this.params.startDate = this.picker_data[0];
      this.params.endDate = this.picker_data[1];
      this.params.userId = 1;
      PayDataKanban(this.params).then((res) => {
        if (res.data.allAmount && res.data.allAmount.length > 0) {
          this.secondMapLeft.yAxis.max = null;
        } else {
          this.secondMapLeft.yAxis.max = 10000;
        }
        res.data.allAmount.forEach(function (amount, index) {
          res.data.allAmount[index] = (amount / 100).toFixed(2)
        })
        console.log(res.data.allAmount)
        this.secondMapLeft.series[0].data = res.data.allAmount;
        this.secondMapLeft.xAxis.data = res.data.payDate;
        //支付宝
        this.secondmapcenter01.series[0].data[0].value = (
          res.data.alipayIncome / 100
        ).toFixed(2);
        this.secondmapcenter01.series[0].data[1].value = (
          res.data.etcIncome / 100
        ).toFixed(2);
        this.secondmapcenter01.series[0].data[2].value = (
          res.data.wechatIncome / 100
        ).toFixed(2);
        this.secondmapcenter01.series[0].data[3].value = (
          res.data.unionIncome / 100
        ).toFixed(2);
        this.secondmapcenter01.series[0].data[4].value = (
          res.data.icbcIncome / 100
        ).toFixed(2);
        // 业务类型
        this.secondmapcenter02.series[0].data[0].value = (
          res.data.zhIncome / 100
        ).toFixed(2);
        this.secondmapcenter02.series[0].data[1].value = (
          res.data.lcIncome / 100
        ).toFixed(2);
        this.secondmapcenter02.series[0].data[2].value = (
          res.data.monthCardIncome / 100
        ).toFixed(2);
        this.secondmapcenter02.series[0].data[3].value = (
          res.data.businessIncome / 100
        ).toFixed(2);
        // 应收 实收 优惠
        // this.secondmapright.series[0].data[0].value = (
        //   res.data.receivableAmount / 100
        // ).toFixed(2);
        this.secondmapright.series[0].data[0].value = (
          res.data.receiveAmount / 100
        ).toFixed(2);
        this.secondmapright.series[0].data[1].value = (
          res.data.discountAmount / 100
        ).toFixed(2);

        var Mychart = this.$refs.secondMapLeft;
        var MYchart = echarts.init(Mychart);
        MYchart.setOption(this.secondMapLeft);
        window.addEventListener("resize", function () {
          MYchart.resize();
        });

        if (this.isShow == 1) {
          let MYchart = echarts.init(this.$refs.secondmapCenter01);
          MYchart.setOption(this.secondmapcenter01);
          window.addEventListener("resize", function () {
            MYchart.resize();
          });
        } else {
          let MYchart = echarts.init(this.$refs.secondmapCenter01);
          MYchart.setOption(this.secondmapcenter02);
          window.addEventListener("resize", function () {
            MYchart.resize();
          });
        }

        var Mychart = this.$refs.secondmapright;
        var MYchart = echarts.init(Mychart);
        MYchart.setOption(this.secondmapright);
        window.addEventListener("resize", function () {
          MYchart.resize();
        });
      });
    },


    changeSecondMapCenter(type) {
      this.isShow = type;
      if (type == 1) {
        let MYchart = echarts.init(this.$refs.secondmapCenter01);
        MYchart.setOption(this.secondmapcenter01);
        window.addEventListener("resize", function () {
          MYchart.resize();
        });
      } else {
        let MYchart = echarts.init(this.$refs.secondmapCenter01);
        MYchart.setOption(this.secondmapcenter02);
        window.addEventListener("resize", function () {
          MYchart.resize();
        });
      }
    },

    //新增用户数据
    getUserDataKanban() {
      this.params.startDate = this.value2[0];
      this.params.endDate = this.value2[1];
      UserDataKanban(this.params).then((res) => {
        //新增用户
        let newUser = res.data.newUser;
        //用户总数
        this.totalUser = newUser.userTheTotal;
        //新增用户数
        this.addUser = newUser.userAdd;
        this.addUserTB = isNaN(newUser.userAddTB) ? 0 : newUser.userAddTB;
        this.addUserHB = isNaN(newUser.userAddHB) ? 0 : newUser.userAddHB;
        if (newUser.allUserTheTotal && newUser.allUserTheTotal.length) {
          this.userlrft.yAxis.max = null;
        } else {
          this.userlrft.yAxis.max = 100;
          newUser.payDate = [this.params.startDate, this.params.endDate];
        }
        this.userlrft.xAxis.data = newUser.payDate;
        this.userlrft.series[0].data = newUser.allUserTheTotal;

        //活跃用户
        let activeUserData = res.data.activeUser;
        this.activeUser = activeUserData.userBeActive;
        this.activeUserTB = activeUserData.userBeActiveTB.toFixed(2);;
        this.activeUserHB = activeUserData.userBeActiveHB.toFixed(2);;
        if (activeUserData.allUserTheTotal && activeUserData.allUserTheTotal.length) {
          this.useright.yAxis.max = null;
        } else {
          this.useright.yAxis.max = 100;
          activeUserData.payDate = [this.params.startDate, this.params.endDate];
        }
        this.useright.xAxis.data = activeUserData.payDate;
        this.useright.series[0].data = activeUserData.allUserTheTotal;

        var userlrft = this.$refs.userlrft;
        var userlrft = echarts.init(userlrft);
        userlrft.setOption(this.userlrft);

        var useright = this.$refs.useright;
        var useright = echarts.init(useright);
        useright.setOption(this.useright);

        window.addEventListener("resize", function () {
          userlrft.resize();
          useright.resize();
        });

      });
    },

    //车场流量
    getDataFlowRate() {
      this.params.startDate = this.value4[0];
      this.params.endDate = this.value4[1];
      dataFlowRate(this.params).then((res) => {
        if (res.data.rateDate && res.data.rateDate.length) {
          this.parkflow.yAxis.max = null;
        } else {
          this.parkflow.yAxis.max = 100;
          // res.data.rateDate = [this.params.startDate, this.params.endDate];
        }
        this.parkflow.xAxis.data = res.data.rateDate;
        this.parkflow.series[0].data = res.data.inData;
        this.parkflow.series[1].data = res.data.outData;
        var Mychart = this.$refs.parkflow;
        var MYchart = echarts.init(Mychart);
        MYchart.setOption(this.parkflow);
        window.addEventListener("resize", function () {
          MYchart.resize();
        });
      });
    },

    //收入数据
    getData() {
      var param = { userId: 1 }
      dataKanban(param).then((res) => {
        // console.log("请求接口返回值:" + res.data);
        //昨日收入
        this.headerAyy[0].money =
          (res.data.lastIncome / 100).toFixed(2) + " 元";
        this.headerAyy[0].zhoubi = res.data.incomeWeeklyRatio.toFixed(2);
        this.headerAyy[0].ribi = res.data.incomeDailyRatio.toFixed(2);
        this.headerAyy[0].lastmoney = (res.data.incomeAvg / 100).toFixed(2) + " 元";
        this.headerAyy[1].money = res.data.orderTotal + " 笔";
        this.headerAyy[1].zhoubi = res.data.orderWeeklyRatio.toFixed(2);
        this.headerAyy[1].ribi = res.data.orderDailyRatio.toFixed(2);
        this.headerAyy[1].lastmoney = res.data.orderCountAvg.toFixed(2) + " 笔";
        this.headerAyy[2].money = res.data.lastCarFlow;
        this.headerAyy[2].zhoubi = res.data.flowWeeklyRatio.toFixed(2);
        this.headerAyy[2].ribi = res.data.flowDailyRatio.toFixed(2);
        this.headerAyy[2].lastmoney = res.data.carFlowAvg.toFixed(0);
        this.headerAyy[3].money = res.data.parkingLotTotal;
        this.headerAyy[3].zhoubi = res.data.parkingSpaceTotal;
        this.headerAyy[3].ribi = res.data.usedParkingSpaceTotal;
        this.headerAyy[3].lastmoney = (res.data.spaceAvg / 100).toFixed(2) + " 元";

        this.headerAyy[4].money = res.data.monthCardTotal;
        this.headerAyy[4].zhoubi = "--";
        this.headerAyy[4].ribi = "--";
        this.headerAyy[4].lastmoney = (res.data.monthCardMoney / 100).toFixed(2) + " 元";

        console.log()
        this.headerAyy[5].money = (res.data.lastTurnover).toFixed(2);
        this.headerAyy[5].zhoubi = res.data.turnoverWeeklyRatio.toFixed(4);
        this.headerAyy[5].ribi = res.data.turnoverDailyRatio.toFixed(4);
        this.headerAyy[5].lastmoney = (res.data.turnoverAvg).toFixed(2);
        console.log(this.headerAyy);
      });
    },

    getLastWeekData() {
      let today = new Date();
      let lastweek = {};
      lastweek.start_day = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
      lastweek.end_day = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
      return lastweek;
    },

    //往后数n天
    getRecentDay_Date: function (n) {
      let dd = new Date();
      dd.setDate(dd.getDate() - n); //获取n天后的日期
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1; //获取当前月份的日期
      let d = dd.getDate();
      let day = y + "-" + m + "-" + d;
      // console.log(day);
      return day;
    },

    //网后数一天
    getRecentDay: function () {
      let dd = new Date();
      dd.setDate(dd.getDate() - 1); //获取n天后的日期
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1; //获取当前月份的日期
      let d = dd.getDate();
      let day = y + "-" + m + "-" + d;
      // console.log(day);
      return day;
    },

    getNextMonth(date, day) {
      // date = date.split("/").join("-");
      let time = new Date(date);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      if (day == 1) {
        if (m >= 12) {
          m = 1;
          y = Number(y) + 1;
        } else {
          m++;
        }
      } else {
        if (m == 1) {
          m = 12;
          y = Number(y) - 1;
        } else {
          m--;
        }
      }
      m = m < 10 ? `0${m}` : m;
      // console.log(String(y) + "/" + String(m));
      return String(y) + "-" + String(m);
    },

    // 获取月的第一天
    getCurrentMonthFirst(time) {
      // time = time.replace(/\//g, "-");
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let firstDay = new Date(year, month - 1, 1); //这个月的第一天
      let day = firstDay.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return `${year}-${month}-${day}`;
    },

    // 获取月的最后一天
    getCurrentMonthLast(time) {
      // time = time.replace(/\//g, "-");
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let lastDay = new Date(year, month, 0); //是0而不是-
      let day = lastDay.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return `${year}-${month}-${day}`;
    },


    drawsecondmapright() {
      var Mychart = this.$refs.secondmapright;
      var MYchart = echarts.init(Mychart);
      MYchart.setOption(this.secondmapright);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          MYchart.resize();
        });
      }, 100);
    },


    get_date(num) {
      var date = new Date(); // 获取今天的时间
      var dates = "";
      if (date.getMonth() + 1 < 10) {
        dates = "0" + (date.getMonth() + 1);
      } else {
        dates = date.getMonth() + 1;
      }
      var today = date.getFullYear() + "-" + dates + "-" + (date.getDate() - 1);

      var new_date = new Date(date);
      new_date.setDate(date.getDate() + num);
      // num为正数时，获取后num天 ，为负数时，获取前num天，0表示今天。
      var new_day =
        new_date.getFullYear() + "-" + dates + "-" + (new_date.getDate() - 7);
      this.params.endDate = today;
      this.params.startDate = new_day;
      this.value1 = [new_day, today];
    },
  },
  mounted() {
    // this.getData();
    // this.getIncomeData(1); // 获取收入数据 默认是近一周
    // this.getUserData(1); // 获取用户数据 默认是近一周
    // this.getParkData(1); // 获取车场流量数据 默认是近一周
  },
};
</script>

<style scoped lang="scss">
.box {
  box-sizing: border-box;
  background: rgba($color: #ddd, $alpha: 0.5);
  width: 100%;
  height: 100vh;
  overflow-x: auto;
  padding: 10px 20px 0 20px;

  .headers {
    width: 100%;
    display: flex;
    height: 160px;
    justify-content: space-between;

    .userHeaderItem {
      width: 33%;
      height: 160px;
      background: #fff;

      padding: 10px;

      span {
        display: block;
      }

      .ttile {
        font-size: 14px;
        margin-bottom: 10px;
      }
    }

    .headers-item {
      width: 16%;
      height: 160px;
      background: #fff;

      padding: 10px;

      span {
        display: block;
      }

      .ttile {
        font-size: 14px;
        margin-bottom: 10px;
      }
    }

    .monrey {
      font-size: 24px;
    }

    .three {
      margin-top: 15px;
      font-size: 14px;
      display: flex;
      width: 100%;
      justify-content: space-between;

      .three-item {
        width: 50%;
      }
    }

    .line {
      width: 100%;
      border: 1px solid #ddd;
      margin-top: 10px;
    }

    .last {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
    }
  }

  .second {
    width: 100%;
    height: 40%;
    background: #fff;
    margin-top: 20px;

    .second-header {
      width: 99%;
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      border-bottom: 1px solid #f5f5f5;

      .second-header-title {
        font-size: 22px;
        // width: 30%;
      }

      .second-header-right {
        width: 70%;
        text-align: right;

        span {
          display: inline-block;
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }

    .second-map {
      width: 100%;
      height: 84%;
      margin-top: 5px;

      display: flex;

      .second-map-left {
        flex: 1;
      }

      .second-map-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .second-map-center-title {
          width: 200px;
          // margin: auto;
          height: 30px;
          display: flex;
          align-items: center;
          // justify-content: center;
          justify-content: space-between;
        }

        .second-map-center-myeacharts {
          height: calc(100% - 30px);
          width: 100%;
        }
      }

      .second-map-right {
        flex: 1;
      }

      .myeacharts {
        width: 100%;
        height: 100%;
      }
    }
  }

  .user-title {
    background: #fff;
    height: 500px;
    margin-top: 20px;
    box-sizing: border-box;

    .second-header {
      width: 99%;
      display: flex;
      justify-content: space-between;
      padding-left: 10px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #f5f5f5;
      // margin-bottom: 10px;
      box-sizing: border-box;

      .second-header-title {
        font-size: 22px;
        // width: 30%;
      }

      .second-header-right {
        width: 70%;
        text-align: right;

        span {
          display: inline-block;
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }
  }

  .user-data {
    width: 100%;
    height: 200px;
    margin-top: 5px;
    background: #fff;
  }

  .user-title .user-map {
    height: 200px;
    width: 100%;
    // background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    div {
      width: 49%;
      height: 100%;
    }
  }

  .parkflow {
    width: 100%;
    height: calc(100% - 60px);
    background: #fff;
    margin: 10px 0;
  }

  .user_data_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    p {
      margin: 0;
      padding-inline: 0;
    }
  }

  .user_data_content {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .user_title_left,
    .user_title_right {
      width: 49%;
      height: 100%;
    }

    .user_title_content_header {
      width: 100%;
      padding: 0 10px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      >p {
        font-size: 14px;
        font-weight: 500;
      }

      >div {
        display: flex;
        align-items: center;
      }
    }

    .user_title_content_cont {
      width: 100%;
      height: calc(100% - 50px);

      .statistics {
        margin: 10px auto;
        width: 220px;
        height: 60px;

        .statistics_top {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .statistics_bot {
          width: 100%;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;

          .statistics_bot_left {
            font-size: 14px;
            display: flex;
            align-items: center;
          }

          .statistics_bot_right {
            font-size: 14px;
            display: flex;
            align-items: center;
          }
        }
      }

      .user_data_echarts {
        width: 100%;
        height: calc(100% - 90px);
      }
    }
  }
}

.time_select_active {
  color: #18abf0;
}

.header_items_car {
  display: flex;
  height: 60px;

  >div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    >p {
      font-size: 24px;
    }
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}</style>
